@extends('layout.home')

@section('title','商品评价')

@section('content')
<style type="text/css">
    .flexslider{ width:300px; height:auto; line-height:25px; overflow:hidden} 
    .flex-control-nav{width:350px;height:90px;overflow:hidden;line-height:25px;} 
    #attr li{
        width:50px;
        border:solid 1px #ddd;
        text-align:center;
        cursor:pointer;
        margin-right:10px;
        color:  #52d0c4;
    }  
    #attr .title{
        width:50px;
        border:none;
        text-align:center;
        cursor:default;
        margin-right:10px;
        color:  #52d0c4;
    }
    button.cart {
    background: #52d0c4 none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    font-size: 1em;
    line-height: 1.6em;
    margin: 1.5em 0 0;
    padding: 0.3em 0.7em;
    text-align: center;
    text-decoration: none;
}

div.quantity {
    position:absolute;
    display:inline-block;
    text-align: center;
    left:10px;
    width:300px;
    height:40px;
}

.hide{
    display:none;
}

.act{
    display:block;
}
.available{
	padding-bottom:0px;
}

textarea {
    resize: none;
    border: 0;
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    overflow: auto;
    padding: 0;
    margin: 0;
}
.col-md-12 .shopcom{
	height:156px;
	border:solid 1px #aaa;
	padding:15px;
	font-size:25px;
	font-weight:bold;
	text-align:center;
	padding-top:0px;
	line-height:39px;
	background:#eee;
	
}
.*{
	font: tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
.commentdiv *{
	padding:0px;
	font: tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
</style>


<div class="container">
	<div class="col-md-12">
	    <div class="col-md-5 grid">
	        <div id="iii" class="flexslider">
	            <ul class="slides">
	            
	                <li style="width:120px;border:solid 1px #ddd" data-thumb="">
	                    <div class="thumb-image">
	                        <img src="/Uploads/20161117/147936467698588_b.jpg" data-imagezoom="true" class="img-responsive">
	                    </div>
	                </li>
	            </ul>
	        </div>
	    </div>
	    <!-- FlexSlider -->
	    
	    <script>
	        // Can also be used with $(document).ready()
	        $(window).load(function() {
	        // setTimeout(function(){
	            $('.flexslider').flexslider({
	                animation: "slide",
	                controlNav: "thumbnails"
	            });
	        // },1000);
	        });
	    </script>
	    <div class="col-md-7 single-top-in pull-left">
	        <div class="single-para simpleCart_shelfItem">

	            <h1 style="color:black;">
	                商品标题
	            </h1>
	            <div class="bot"  style="background:#52d0c4;width:440px; auto;height:1px;margin:20px;margin-left:0px"></div>

	            <div class="star-on">
	                <ul>
	                    <li><a href="#"><i class="glyphicon glyphicon-star"></i></a></li>
	                    <li><a href="#"><i class="glyphicon glyphicon-star"></i></a></li>
	                    <li><a href="#"><i class="glyphicon glyphicon-star"></i></a></li>
	                    <li><a href="#"><i class="glyphicon glyphicon-star"></i></a></li>
	                    <li><a href="#"><i class="glyphicon glyphicon-star"></i></a></li>
	                </ul>
	                <div class="review">
	                    <a href="#">
	                        3 reviews
	                    </a>
	                    /
	                    <a href="#">
	                        Write a review
	                    </a>
	                </div>
	                <div class="clearfix">
	                </div>
	            </div>
	            <label class="add-t item_pric" style="margin-bottom:15px">
	            价格
	            </label>
	            <div class="clearfix"></div>

	            <label class="add-t item_pric" style="margin-bottom:15px">
	            销量
	            </label>
	            <div class="bot"></div>

	            <label class="add-t item_pric" style="margin-bottom:15px">
	            评分
	            </label>
	            <div class="bot"  style="background:#52d0c4;width:440px; auto;height:1px;margin:10px;margin-left:0px"></div>
	        </div>
	    </div>
    <div class="clearfix"></div>
    <hr>
    <form action="/goods/comment/docomment" method="post" enctype="multipart/form-data">
	<div class="col-md-12 commentdiv" style="padding:0px;margin-bottom:100px">
		<div class="col-md-6" style="border:solid 1px #aaa">
			<div class="col-md-12" style="padding:0px">
				<div class="col-md-2 shopcom">商品评论</div>
				<div class="col-md-10 pull-left" style="border:solid 1px #ddd">
					<textarea name="content" id="" cols="20" rows="7"></textarea>
				</div>
			</div>
			<div class="col-md-12" border="1">
				<div class="col-md-2" style="line-height:36px;text-align:center;font-weight:bold">图片</div>
				<div class="col-md-10 pull-left" style="border:solid 1px #ddd;padding:5px 0px">
					<input  type="file" name="path[]" multiple>
				</div>
			</div>
		</div>
		<div class="col-md-5 col-md-offset-1" style="height:195px">
			<div style="margin-top:20px">
				<span class="pull-left" style="margin-right:10px">评分:</span>
				<div class="star-on pull-left">
	                <ul class="ul grade">
	                    <li point="1"><i class="glyphicon glyphicon-star-empty"></i></li>
	                    <li point="2"><i class="glyphicon glyphicon-star-empty"></i></li>
	                    <li point="3"><i class="glyphicon glyphicon-star-empty"></i></li>
	                    <li point="4"><i class="glyphicon glyphicon-star-empty"></i></li>
	                    <li point="5"><i class="glyphicon glyphicon-star-empty"></i></li>
	                </ul>
		        </div>
	        </div>
	        <div class="clearfix"></div>
	        <div style="margin-top:125px">
	        	{{csrf_field()}}
	        	<input type="hidden" name="order_id" value="{{$request->orderid}}">
	        	<input type="hidden" name="level" value="">
	        	<input type="hidden" name="goods_id" value="{{$request->goodsid}}">
	        	<button style="padding:3px;" class="btn btn-1 btn-primary">提交评论</button>
	        </div>
		</div>
	</div>
	</form>
</div>
</div>
                    
@endsection

@section('youpian')
@endsection

@section('js')
<script type="text/javascript">
	//定义是否单击标识
	var flag = null;
	//获取所有li
	var lis = $('.grade li');
	//鼠标悬浮
	lis.mouseover(function(){
		var point = $(this).attr('point');
		// alert(point);
		lis.each(function(){
			if($(this).attr('point') <= point){
				$(this).find('i').attr('class','glyphicon glyphicon-star');
				
			}
		});
	});

	//鼠标离开
	lis.mouseout(function(){
		var point = $(this).attr('point');
		if(flag){
			lis.each(function(){
				if($(this).attr('point') > flag && $(this).attr('point') <= point){
					$(this).find('i').attr('class','glyphicon glyphicon-star-empty');
				}
			});
		}else{
			lis.find('i').attr('class','glyphicon glyphicon-star-empty');
		}
	});

	//鼠标单击
	lis.click(function(){
		var point = $(this).attr('point');
		lis.each(function(){
			if($(this).attr('point') <= point){
				$(this).find('i').attr('class','glyphicon glyphicon-star');
				flag = $(this).attr('point');
			}
			//大于
			if($(this).attr('point') > point){
				$(this).find('i').attr('class','glyphicon glyphicon-star-empty');
			}
			//将point添加到form表单中
			$('input[name=level]').val(flag);
		});
	});

	

</script>
@endsection